<template>
  <div class="app-container home">
    <!-- 销售订单数据概览 -->
    <el-row :gutter="20" class="overview-row">
      <el-col :span="6" v-for="item in overviewData" :key="item.title">
        <el-card class="overview-card" @click="jumpOrder(item.type)">
          <div class="overview-icon" :style="{ background: item.bg }">
            <component :is="item.icon" style="font-size: 40px; color: #fff;" />
          </div>
          <div class="overview-content">
            <div class="overview-value">{{ item.value }}</div>
            <div class="overview-title">{{ item.title }}</div>
            <div class="overview-desc">{{ item.desc }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 待办事项区域 -->
    <el-row :gutter="20" class="todo-row" style="margin-top: 24px;">
      <el-col :span="12">
        <el-card class="todo-card">
          <template #header>
            <el-icon><Van /></el-icon> 待配送订单
          </template>
          <el-table :data="todoDeliveryList" size="small" border>
            <el-table-column prop="orderNo" label="订单编号" width="120" />
            <el-table-column label="订单类型" width="90">
              <template #default="scope">
                <span>{{ (orderTypeOptions.find(item => item.value === scope.row.orderType) || {}).label || '-' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="money" label="销售金额" width="90" />
            <el-table-column label="已收金额" width="90">
              <template #default="scope">
                <span>{{ (scope.row.receiptMoney || 0) + (scope.row.realMoney || 0) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="未收金额" width="90">
              <template #default="scope">
                <span>{{ (scope.row.money || 0) - (scope.row.receiptMoney || 0) - (scope.row.realMoney || 0) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="sendName" label="发货公司" width="120" />
            <el-table-column prop="receiveName" label="收货客户" width="120" />
            <el-table-column prop="deliveryTime" label="配送时间" width="120" />
            <el-table-column prop="driverName" label="配送司机" width="100" />
            <el-table-column label="订单状态" width="90">
              <template #default="scope">
                <dict-tag :options="orderStatusOptions" :value="scope.row.orderStatus" />
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="todo-card">
          <template #header>
            <el-icon><User /></el-icon> 服务中订单
          </template>
          <el-table :data="todoServingList" size="small" border>
            <el-table-column prop="orderNo" label="订单编号" width="120" />
            <el-table-column label="订单类型" width="90">
              <template #default="scope">
                <span>{{ (orderTypeOptions.find(item => item.value === scope.row.orderType) || {}).label || '-' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="money" label="销售金额" width="90" />
            <el-table-column label="已收金额" width="90">
              <template #default="scope">
                <span>{{ (scope.row.receiptMoney || 0) + (scope.row.realMoney || 0) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="未收金额" width="90">
              <template #default="scope">
                <span>{{ (scope.row.money || 0) - (scope.row.receiptMoney || 0) - (scope.row.realMoney || 0) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="sendName" label="发货公司" width="120" />
            <el-table-column prop="receiveName" label="收货客户" width="120" />
            <el-table-column prop="deliveryTime" label="配送时间" width="120" />
            <el-table-column prop="driverName" label="配送司机" width="100" />
            <el-table-column label="订单状态" width="90">
              <template #default="scope">
                <dict-tag :options="orderStatusOptions" :value="scope.row.orderStatus" />
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快捷操作区 -->
    <el-row :gutter="20" class="quick-row" style="margin-top: 24px;">
      <el-col :span="3" v-for="item in quickActions" :key="item.title">
        <el-card class="quick-card" @click="goTo(item.path)" shadow="hover">
          <div class="quick-icon">
            <component :is="item.icon" style="font-size: 32px; color: #409EFF;" />
          </div>
          <div class="quick-title">{{ item.title }}</div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">
import { ref, onMounted } from 'vue'
import { ShoppingCart, Document, User, Location, Tickets, Van ,Clock,Suitcase } from '@element-plus/icons-vue'
import request from '@/utils/request'
import DictTag from '@/components/DictTag'
import { useDict } from '@/utils/dict'

const overviewData = ref([
  { type:0,title: '今日订单数', value: 0, desc: '', icon: ShoppingCart, bg: 'linear-gradient(135deg, #409EFF 0%, #66b1ff 100%)' },
  { type:0,title: '今日销售额', value: '¥ 0', desc: '', icon: Tickets, bg: 'linear-gradient(135deg, #67C23A 0%, #95d475 100%)' },
  { type:1,title: '待处理订单', value: 0, desc: '', icon: Document, bg: 'linear-gradient(135deg, #E6A23C 0%, #f3d19e 100%)' },
  { type:2,title: '待配送订单', value: 0, desc: '', icon: Van, bg: 'linear-gradient(135deg, #F56C6C 0%, #fab6b6 100%)' },
])

const todoDeliveryList = ref([])
const todoServingList = ref([])

const quickActions = [
  { title: '新建订单', icon: ShoppingCart, path: '/biz/bizOrder' },
  { title: '客户管理', icon: User, path: '/biz/bizCustomer' },
  { title: '客户地址', icon: Location, path: '/biz/bizCustomerAddr' },
  { title: '结算单', icon: Tickets, path: '/biz/bizPayoffOrder' },
  { title: '司机管理', icon: Van, path: '/biz/bizDriver' },
  { title: '司机打卡', icon: Clock, path: '/biz/bizDriverLog' },
  { title: '司机报销', icon: Suitcase, path: '/biz/bizReimburse' },
  { title: '子公司', icon: Document, path: '/biz/bizCompany' },
]

const { order_status: orderStatusOptions } = useDict('order_status')

// 订单类型映射与主表一致
const orderTypeOptions = [
  { label: '配送订单', value: 0 },
  { label: '物流订单', value: 1 },
  { label: '采样订单', value: 2 }
]
const router = useRouter();
const jumpOrder = (type) => {
  console.log("x")
  var param = "";
  switch (type) {
    case 0:
      param = "?orderStatus=-1&now=1";
      break;
    case 1:
      param = "?orderStatus=0";
      break;
    case 2:
      param = "?orderStatus=1";
      break;
    default:
      break;
  }
  router.push("/biz/bizOrder"+param);
}
const goTo = (path) => {
  if (path) {
    if (window.$router) {
      window.$router.push(path)
    } else {
      window.location.href = path
    }
  }
}

const fetchHomeData = async () => {
  // 获取销售订单数据概览
  const statRes = await request.get('/biz/bizOrder/homeStatistics')
  if (statRes && statRes.code === 200) {
    const d = statRes.data
    overviewData.value[0].value = d.todayOrderCount
    overviewData.value[1].value = '¥ ' + (d.todayOrderAmount || 0)
    overviewData.value[2].value = d.pendingOrderCount
    overviewData.value[3].value = d.toBeDeliveredOrderCount
    overviewData.value[0].desc = ''
    overviewData.value[1].desc = ''
    overviewData.value[2].desc = ''
    overviewData.value[3].desc = ''
  }
  // 获取待办事项列表
  const todoRes = await request.get('/biz/bizOrder/homeTodoList')
  if (todoRes && todoRes.code === 200) {
    todoDeliveryList.value = todoRes.data.delivery || []
    todoServingList.value = todoRes.data.serving || []
  }
}

onMounted(() => {
  fetchHomeData()
})
</script>

<style scoped>
.app-container.home {
  padding: 24px;
  background: #f5f7fa;
}
.overview-row {
  margin-bottom: 0;
}
.overview-card {
  display: flex;
  align-items: center;
  min-height: 100px;
  box-shadow: 0 2px 8px #e4e7ed33;
  border-radius: 10px;
  padding: 12px 18px;
}
::v-deep(.overview-card .el-card__body) {
  display: flex;
  align-items: center;
}
.overview-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 18px;
  flex-shrink: 0;
}
.overview-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.overview-value {
  font-size: 28px;
  font-weight: bold;
  color: #222;
  margin-bottom: 2px;
}
.overview-title {
  font-size: 15px;
  color: #666;
  margin-bottom: 2px;
}
.overview-desc {
  font-size: 13px;
  color: #999;
}
.todo-card {
  min-height: 320px;
  border-radius: 10px;
}
.quick-row {
  margin-bottom: 0;
}
.quick-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 110px;
  cursor: pointer;
  border-radius: 10px;
  transition: box-shadow 0.2s;
}
.quick-card:hover {
  box-shadow: 0 4px 16px #409eff22;
}
.quick-icon {
  margin-bottom: 8px;
}
.quick-title {
  font-size: 15px;
  color: #333;
}
</style>

